<template>
	<view>
		<qi-navtop></qi-navtop>
		<qi-search></qi-search>
		<view class="home">
			<scroll-view scroll-y class="scroll">
				<swiper indicator-dots autoplay class="swiper">
					<swiper-item
						v-for="(item, i) in studata.swiperdata"
						:key="i"
					>
						<image :src="item.image_src"></image>
					</swiper-item>
				</swiper>
				<!--nav-->
				<view class="navcatitem">
					<view
						class="catitem"
						v-for="(item, i) in studata.catitems"
						:key="i"
					>
						<image :src="item.image_src"></image>
					</view>
				</view>
				<!-- 楼层 -->
				<view class="floormianbox">
					<view v-for="item in studata.floordata">
						<view>
							<image
								class="floorheader"
								:src="item.floor_title.image_src"
							></image>
						</view>
						<view class="floorbox">
							<view class="floorleft">
								<image
									:src="item.product_list[0].image_src"
									:style="{
										width: item.product_list[0].image_width + 'rpx'
									}"
									mode="widthFix"
								></image>
							</view>
							<view class="floorrigth">
								<view
									v-for="(itemx, x) in item.product_list"
									:key="x"
								>
									<image
										:src="itemx.image_src"
										mode="widthFix"
										:style="{ width: itemx.image_width + 'rpx' }"
										v-if="x !== 0"
									></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- {{studata.floordata}} -->
			</scroll-view>
		</view>
		<qi-tabbar></qi-tabbar>
	</view>
</template>

<script setup>
import {
	reactive,
	toRefs,
	ref,
	onMounted,
	getCurrentInstance
} from 'vue';
const studata = reactive({
	swiperdata: [],
	catitems: [],
	floordata: []
});
const { proxy } = getCurrentInstance();
onMounted(() => {
	// 轮播图
	proxy.$http({ url: '/home/swiperdata' }).then(res => {
		if (res.meta.status === 200) {
			studata.swiperdata = res.message;
		}
	});
	// 导航
	proxy.$http({ url: '/home/catitems' }).then(res => {
		if (res.meta.status === 200) {
			studata.catitems = res.message;
		}
	});
	// 楼层
	proxy.$http({ url: '/home/floordata' }).then(res => {
		if (res.meta.status === 200) {
			studata.floordata = res.message;
		}
	});
});
</script>

<style lang="scss" scoped>
.home {
	.scroll {
		height: calc(100vh - 150px);
		.swiper {
			height: 200px;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.navcatitem {
		display: flex;
		justify-content: space-around;
		image {
			width: 64px;
			height: 70px;
		}
		padding: 10px 0;
	}
	.floormianbox {
		.floorheader {
			height: 30px;
		}
		.floorbox {
			display: flex;
		}
		.floorleft {
		}
		.floorrigth {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}
	}
}
</style>
